<template>
  <div>
    <h3>姓名:{{ user.name }}</h3>
    <h3>性别:{{ user.gender }}</h3>
    <h3>年龄:{{ user.age }}</h3>
    <button @click="updateUser">更新年龄</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "App",
  // 需求:显示用户的相关信息，点击按钮，可以更新用户的相关信息数据

  /**
   * 作用：定义多个数据的响应式
   * const proxy=reactive(obj)；接受一个普通对象然后返回该普通对象的响应式代理器对象
   * 响应式转换式“深层的”：会影响对象内部所有嵌套的属性
   * 内部基于ES6的proxy实现，通过代理对象操作源对象内部数据都是响应式的
   */
  setup() {
    // 返回生成一个代理对象;类似Java里面的代理设计模式
    const obj: any = {
      name: "小明",
      age: 10,
    };
    const aaa = "";
    const user = reactive(obj);
    // 方法
    const updateUser = () => {
      user.age++;
      // 添加字段得在代理对象
      user.gender == 200;

      delete user.age;
    };
    return {
      user,
      updateUser,
    };
  },
});
</script>

<style>
</style>
